<template>
  <section>
    <a-card v-for="(record, index) in data" :key="index" class="order-goods">
      <img slot="cover" alt="example" :src="record.imgUrl ? record.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'" class="img" />
      <div class="info">
        <h3 class="title">款号：{{ record.productCode }}</h3>
        <p class="detail">
          <ellipsis :length="24" tooltip>{{ record.productBrand }}{{ record.productName }}</ellipsis>
          <br />
          <span>颜色：{{ record.productColor }}/{{ record.productColorNo }}</span>
          <br />
          <span>尺码：{{ record.productSize }}</span>
        </p>
      </div>
    </a-card>
  </section>
</template>
<script>
import { Ellipsis } from '@views/box/components/index'
export default {
  props: ['data'],
  components: { Ellipsis }
}
</script>
<style lang="less" scoped>
section {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 160px);
  grid-column-gap: 0px;
  margin-top: 12px;
}
.order-goods {
  margin-bottom: 16px;
  /deep/.ant-card-body {
    padding: 12px 8px;
  }
  .title {
    font-size: 15px;
  }
  .detail {
    margin-bottom: 0;
  }
}
.img {
  height: 150px;
  object-fit: scale-down;
  text-align: center;
}
</style>

